$wrap-width: 1190px;

html, body, input, button, img, a, p, label, {
  margin: 0;
  padding: 0;
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
h3,h4,span {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #6c6c6c;
}
button {
  outline: none;
  border: 0;
}
img {
  vertical-align:top;
  border:none
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

body {
   background: rgb(245,245,245); 
}
.icon {
  width: 1em; height: 1em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}


header {
  font-size: 12px;
  color: #6c6c6c;
  .icon {
    width: .5em; height: .5em;
    vertical-align: 0.2em;
    fill: currentColor;
    overflow: hidden;
    margin-left: .5em;
  }
  > div {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    .login ul,
    .header-nav ul {
      height: 37px;
      line-height: 37px;
      display: flex;
      flex-wrap: nowrap;
    }
    .login ul {
      li {
        margin-right: 20px;
        .p-login {
          color: rgb(246,42,0);
        }
      }
    }
    .header-nav ul {
      li {
        margin-left: 15px;
        .shop-cart,
        .icon-menu {
          width: 1em;
          height: 1em;
          color: orangered;
          vertical-align: -0.15em;
        }
        .collect {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
        }
        .vertical-line {
          width: 1.2em;
          height: 1.2em;
          vertical-align: -0.3em;
        }
      }
    }
  }
}

.top-content {
  background: white;
  .top-wrap {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    justify-content: start;
    align-items: center;
    .logo {
      width: 190px;
      height: 80px;
      background: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) center top no-repeat;
      margin-top: 25px;
    }
    .search {
      margin-left: 90px;
      margin-top: 20px;
      .icon {
        width: 1.5em; height: 1.5em;
        vertical-align: middle;
        fill: currentColor;
        overflow: hidden;
      }
      .search-tab {
        margin-left: 15px;
        span {
          color: rgb(255,68,0);
          margin-right: 10px;
        }
        span:nth-child(1) {
          background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
          color: #fff;
          padding: 3px;
          font-weight: 700;
          border-radius: 5px 5px 0 0;
        }
      }
      .search-content {
        position: relative;
        display: flex;
        input{
          width: 556px;
          height: 36px;
          border: 2px solid rgb(255,80,0);
          border-radius: 40px 0 0 40px;
          outline: none;
          padding-left: 10px;
          border-right: none;
        }
        .icon-search {
          position: absolute;
          left: 12px;
          top: 10px;
          color: #6c6c6c;
        }
        .icon-camera {
          position: absolute;
          right: 86px;
          top: 10px;
          color: #6c6c6c;
        }
        button {
          width: 76px;
          height: 40px;
          background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
          border-radius: 0 40px 40px 0;
          font-size: 18px;
          font-weight: 700;
          color: #FFF;
          cursor: pointer;
        }
      }
      .search-tags {
        margin-top: 5px;
        padding-bottom: 10px;
        span{
          margin-right: 2px;
        }
        span:nth-child(3){
          color:  rgb(255,68,0);
        }
      }
    }
  }
}
.tbh-nav {
  background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  height: 32px;
  line-height: 32px;
  .icon {
    width: 1em; height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
  }
  ul {
    width: $wrap-width;
    display: flex;
    margin: 0 auto;
    li {
      margin-right: 20px;
    }
    li:nth-child(1){
      width: 190px;
      text-align: center;
      background-color: rgb(255,80,0);
    }
    li:nth-child(5),
    li:nth-child(11) {
      margin-right: 10px;
      span {
        border: 1px solid white;
        font-size: 12px;
      }
    }
    li:last-child {
      background-image: radial-gradient(#6c6c6c 30%, transparent 0),
      radial-gradient(#6c6c6c 30%, transparent 0);
      background-size: 10px 10px;
      background-position: 0 0,15px 15px;
      transition: background 1s ease-in;
    }
  }
}


.content-wrap {
  width: $wrap-width;
  margin: 0 auto;
  .main-content {
    //width: $wrap-width;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 190px 520px 160px 290px;
    grid-template-rows: 280px 220px 100px;
    grid-template-areas: "side-nav advert-banner advert-sug apart-app"
    "side-nav advert-tmall day-hot apart-app"
    "taobao-news taobao-news taobao-news apart-app";
    grid-gap: 10px 10px;
    .side-nav {
      grid-area: side-nav;
      background: #fff;
      border: 1px solid red;
      border-top: none;
      ul {
        font-size: 14px;
        color: rgb(102,102,102);
        li {
          position: relative;
          padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 20px;
          .icon {
            width: .7em;
            height: .7em;
            position: absolute;
            right: 10px;
            top: 10px;
          }
        }
        li:nth-child(1){
          padding-top: 10px;
          svg {
            top: 15px;
          }
        }
      }
    }
    .advert-banner {
      grid-area: advert-banner;
      background: pink;
      margin-top: 10px;
      overflow: hidden;
      ul {
        width: 2600px;
        animation: imgMove 5s linear infinite;
        display: flex;
        @keyframes imgMove {
          0%,15% {
            transform: translateX(0);
          }
          25%,40%{
            transform: translateX(-520px);
          }
          50%,65% {
            transform: translateX(-1040px);
          }
          75%,90% {
            transform: translateX(-1560px);
          }
          100% {
            transform: translateX(-2080px);
          }
        }
      }

    }
    .advert-sug {
      grid-area: advert-sug;
      background: green;
      margin-top: 10px;
      overflow: hidden;
    }
    .apart-app {
      grid-area: apart-app;
      background: white;
      margin-top: 10px;
      .login-part {
        .login-head {
          text-align: center;
          margin-top: 5px;
          margin-bottom: 10px;
          img {
            border-radius: 50%;
          }
          div {
            font-size: 12px;
            color: rgb(60,60,60);
            font-weight: 400;
            margin: 1px 0;
          }
          span {
            display: inline-block;
            background-color: rgb(255,228, 219);
            font-size: 12px;
            color: rgb(255,80,0);
            font-weight: 400;
            padding-right: 8px;
            border-radius: 8px;
            margin-right: 3px;
            svg {
              vertical-align: middle;
              background-color: white;
              color: rgb(255,204,36);
              border-radius: 50%;
            }
          }
        }
        .login-btn {
          text-align: center;
          button {
            background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
            color: white;
            font-size: 14px;
            font-weight: 700;
            padding: 2px 20px;
            border-radius: 5px;
            margin: 0 2px;
          }
          button:nth-child(1){
            padding: 2px 30px;
          }
        }
      }
      .report {
        margin-top: 15px;
        .info-area{
          background: rgb(255, 228, 221);
          color: rgb(255,68,0);
          text-align: center;
          padding: 2px 0;
          .icon {
            width: 1.5em;
            height: 1.5em;
            margin-left: 20px;
          }
        }
        .report-info {
          position: relative;
          margin-top: 15px;
          height: 90px;
          li {
            input {
              display: none;
            }
            label {
              float: left;
              width: 57px;
              text-align: center;
              box-sizing: border-box;
              cursor: pointer;
              transition: all .3s;
              a {
                color: rgb(60,60,60);
                font-size: 12px;
              }
            }
            input:checked + label {
              &::after {
                content: '';
                display: block;
                width: 25px;
                margin: 0 auto;
                border-bottom: 2px solid rgb(255,68,0);
              }
            }
            .content {
              opacity: 0;
              visibility: hidden;
              position: absolute;
              left: 0;
              top: 30px;
              width: 100%;
              box-sizing: border-box;
              transition: all .3s;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              p {
                width: 120px;
                margin: 3px 5px;
                white-space: nowrap;
                overflow: hidden;
                color: rgb(60,60,60);
              }
            }
            input:checked ~ .content {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
      .life {
        position: relative;
        display: flex;
        align-items: center;
        > li {
          flex: 1;
          display: flex;
          align-self: center;
          justify-content: center;
          > input {
            display: none;
          }
          > label {
            padding: 15px 0;
            box-sizing: border-box;
            text-align: center;
            vertical-align: middle;
            width: 100%;
            border: 1px solid #ddd;
            border-bottom: 1px solid red;
            .icon {
              width: 2em;
              height: 2em;
            }
            .icon1 {
              color: purple;
            }
            .icon2 {
              background: yellow;
              border-radius: 50%;
            }
            .icon3 {
              background: greenyellow;
              border-radius: 50%;
            }
            .icon4 {
              color: green;
            }
            span {
              display: block;
            }
          }
          .content {
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 73px;
            display: none;
            height: 158px;
            border: 1px solid red;
            width: 100%;
            border-top: none;
          }
          > input:checked ~ .content {
            display: block;
          }
          > input:checked ~ label span {
            color: rgb(255,68,0);
          }
          > input:checked ~ label {
            border: 1px solid red;
            border-bottom: none;
          }
          #content-phone {
            .bill-info {
              > li {
                position: relative;
                > input {
                  display: none;
                }
                > label {
                  float: left;
                  width: 20%;
                  text-align: center;
                  margin-top: 10px;
                  color: rgb(102,102,102);
                }
                .bill-content {
                  position: absolute;
                  left: 0;
                  top: 40px;
                  width: 100%;
                  margin-left: 10px;
                }
                .bill-content {
                  display: none;
                }
                > input:checked ~ .bill-content {
                  display: block;
                }
                > input:checked ~ label {
                  color: red;
                }

                .ph-content,
                .tlp-content,
                .broad-content {
                  > div {
                    position: relative;
                    input {
                      width: 190px;
                      font-size: 12px;
                    }
                    svg {
                      position: absolute;
                      top: 5px;
                      right: 100px;
                    }
                  }
                  p {
                    color: rgb(102,102,102);
                    font-size: 12px;
                    margin: 5px 0;
                    em {
                      color: #f62a00;
                      font-weight: 700;
                    }
                  }
                  button {
                    background: rgb(255,68,0);
                    color: white;
                    font-weight: 700;
                    padding: 5px 10px;
                    border-radius: 3px;
                  }
                }
                .flow-content {
                  > div {
                    position: relative;
                    input {
                      width: 190px;
                    }
                    svg {
                      position: absolute;
                      top: 5px;
                    }
                  }
                  > div:nth-child(1) {
                    svg {
                      right: 100px;
                    }
                  }
                  > div:nth-child(2){
                    input {
                      width: 91px;
                    }
                    svg:first-of-type{
                      right: 200px;
                    }
                    svg:nth-of-type(2) {
                      right: 100px;
                    }
                    > a {
                      color: #29AEFE;
                    }
                  }
                  p {
                    color: rgb(102,102,102);
                    font-size: 12px;
                    margin: 5px 0;
                    em {
                      color: #f62a00;
                      font-weight: 700;
                    }
                  }
                  button {
                    background: rgb(255,68,0);
                    color: white;
                    font-weight: 700;
                    padding: 5px 10px;
                    border-radius: 3px;
                  }
                }
                .tlp-content,
                .broad-content {
                  button {
                    margin-top: 5px;
                  }
                  p {
                    display: inline-block;
                  }
                }
              }
            }

          }
        }
      }
      .ali-app {
        margin-top: 158px;
        > div {
          margin-left: 10px;
          display: flex;
          justify-content: space-between;
        }
        > ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;
          li {
            width: 50px;
            text-align: center;
            margin-top: 5px;
            img {
              width: 60%;
            }
          }
        }
      }
    }

    .advert-tmall {
      grid-area: advert-tmall;
      //overflow: hidden;
      .advert-tmall-header {
        .logo {
          display: inline-block;
          width: 130px;
          height: 16px;
          background: url("") no-repeat;
          vertical-align: bottom;
        }
        span:nth-child(2){
          font-size: 12px;
          color: #666;
        }
      };
      .container {
        position: relative;
        .tab {
          display: flex;
          justify-content: space-around;
          margin-top: -2px;
          li {
            flex-grow: 1;
            line-height: 0;
            a {
              display: inline-block;
              height: 3px;
              background: red;
              width: 100%;
            }
          }
        }
        .tab-content {
          width: 520px;
          height: 199px;
          position: absolute;
          visibility: hidden;
          top: 5px;
          overflow: hidden;
          background: white;
        }

        #tab1 {
          display: flex!important;
          flex-wrap: wrap;
          div {
            display: flex;
            width: 129px;
            height: 66px;
            border: 0.5px solid #ddd;
            align-items:center;
            justify-content: center;
            img {
              width: 60%;
              height: auto;
              vertical-align: middle;
            }
          }
        }
        #tab2 {
          display: flex;
          div {
            width: 260px;
            height: 200px;
            margin: 20px 5px;
          }
        }
        #tab3 {
          display: flex;
          div {
            margin: 7px 10px;
          }
        }
        #tab4 {
          display: flex;
          div {
            margin: 7px 10px;
          }
        }
        #tab5 {
          display: flex;
          div {
            margin: 7px 10px;
          }
        }
        #tab6 {
          display: flex;
          div {
            margin: 7px 10px;
          }
        }
        #tab1:target,
        #tab2:target,
        #tab3:target,
        #tab4:target,
        #tab5:target,
        #tab6:target {
          visibility: visible;
        }
        #tab1.active {
          visibility: visible;
        }

        .tab > li .active ~ .tab li:first-child a {
          background: black;
        }
        #tab1:target ~ .tab li a {
          background: red;
        }
        #tab1:target ~ .tab li:nth-child(1) a {
          background: black;
        }
        #tab2:target ~ .tab li a {
          background: red;
        }
        #tab2:target ~ .tab li:nth-child(2) a {
          background: black;
        }
        #tab3:target ~ .tab li a {
          background: red;
        }
        #tab3:target ~ .tab li:nth-child(3) a {
          background: black;
        }
        #tab4:target ~ .tab li a {
          background: red;
        }
        #tab4:target ~ .tab li:nth-child(4) a {
          background: black;
        }
        #tab5:target ~ .tab li a {
          background: red;
        }
        #tab5:target ~ .tab li:nth-child(5) a {
          background: black;
        }
        #tab6:target ~ .tab li a {
          background: red;
        }
        #tab6:target ~ .tab li:nth-child(6) a {
          background: black;
        }
      }
    }
    .day-hot {
      grid-area: day-hot;
      div {
        font-size: 12px;
        color: rgb(161,161,161);
      }
    }
    .taobao-news {
      grid-area: taobao-news;
      background: white;
      display: flex;
      .new-logo{
        height: 100%;
        width: 190px;
        padding-left: 10px;
        h3 {
          margin-top: 20px;
          height: 40px;
          background: url(//img.alicdn.com/tfs/TB1KbhkbUgQMeJjy0FeXXXOEVXa-129-26.png) 0 14px no-repeat;
        }
        p {
          color: rgb(153,153,153);
        }
      }
      .new-content {
        display: flex;
        img {
          width: 133px;
          height: 73px;
          vertical-align: center;
          margin-top:13px;
        }
        h4 {
          margin-left: 5px;
          font-size: 16px;
          color: #333;
        }
        p {
          margin-left: 5px;
          font-size: 14px;
          color: #999;
          height: 18px;
          line-height: 18px;
          overflow: hidden;
        }
        div:last-child {
          margin-left: 120px;
          margin-top: 13px;
        }
      }
    }

  }

  .goods-shopping-wrap {
    //width: $wrap-width;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;

    > div {
      width: 550px;
      padding: 20px;
      background: white;

      > div {
        display: flex;
        align-items: center;

        img {
          height: 23px;
          margin-right: 5px;
        }

        p {
          margin: 0 5px;
          color: #999;
          font-weight: 400;
        }

        > div {
          margin-left: 343px;
          color: #999;
          font-weight: 400;
        }
      }
      > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 180px;
          height: 276px;
          margin-top: 20px;
          > img {
            width: 180px;
            height: 189px;
          }
        }
      }
    }

    .has-goods {
      ul {
        li {
          h4 {
            font-size: 16px;
            height: 28px;
            line-height: 28px;
            font-weight: normal;
            overflow: hidden;
          }

          p:nth-of-type(1) {
            font-size: 14px;
            color: #999;
            height: 24px;
            line-height: 24px;
            overflow: hidden;
          }

          p:nth-of-type(2) {
            height: 22px;
            line-height: 22px;
            margin-top: 12px;
            color: #35b1ff;
            font-size: 14px;
          }
        }
      }

    }
    .love-shopping {
      ul {
        li {
          img {
            margin-bottom: 5px;
          }
          div {
            font-size: 14px;
            color: #999;
            height: 44px;
            line-height: 22px;
            svg {
              vertical-align: top;
              font-size: 2em;
              margin-top:-8px;
            }
          }
          p {
            height: 22px;
            line-height: 22px;
            margin-top: 12px;
            img {
              border-radius: 50%;
              width: 22px;
              height: 22px;
            }
            span{
              font-size: 12px;
              color: #999;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }

  //.aside-nav {
  //  position: fixed;
  //  float: right;
  //  //top: 180px;
  //}
}


